<!DOCTYPE html>
<!--
1.页面自适应浏览器高度
2.static header+tabs with iframe结构
3.侧边工具组
4.消息提醒（置顶、页内、边角)
5.
-->
<html>
    <head>
        <title>XCall</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="AmazeUI-2.4.2/css/amazeui.min.css" rel="stylesheet" type="text/css"/>
        <script src="AmazeUI-2.4.2/js/jquery.min.js" type="text/javascript"></script>
        <script src="AmazeUI-2.4.2/js/amazeui.min.js" type="text/javascript"></script>
        <style type="text/css">
            .doc-am-g>[class*=col-], .doc-am-g>[class*=am-u-] {border: 1px solid #dd514c;}
            .am-topbar .am-text-ir {
                display: block;
                margin-right: 10px;
                height: 50px;
                width: 125px;
                background: url(http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;
                -webkit-background-size: 125px 24px;
                background-size: 125px 24px;
            }
            [class*=am-icon-] {margin-left:5px;}
            .am-modal-hd .am-icon-btn { font-size:18px; height: 18px; line-height: 18px; border-radius: 10%; margin-right:5px;}
            .am-modal .am-modal-hd {text-align:left; }
        </style>
    </head>
    <body>
        <!--顶部-->
        <header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
            <div class="am-container">
                <!-- Logo -->
                <h1 class="am-topbar-brand">
                    <a href="#" class="am-text-ir2">XCALL-CRM</a>
                </h1>
                <!-- /Logo -->
                <!-- 移动屏幕按钮 -->
                <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
                        data-am-collapse="{target: '#doc-topbar-collapse-4'}"><span class="am-sr-only">导航切换</span> <span
                        class="am-icon-bars"></span></button>
                <!-- /移动屏幕按钮 -->
                <!-- 导航菜单 -->
                <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-4">
                    <ul class="am-nav am-nav-pills am-topbar-nav am-text-xs">
                        <li class="am-active"><a href="#">首页</a></li>
                        <li class="am-dropdown" data-am-dropdown>                            
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">系统管理<span class="am-icon-caret-down"></span></a>
                            <ul class="am-dropdown-content">
                                <li class="am-dropdown-header">用户管理</li>
                                <li class="am-active"><a href="#" data-id="3">操作员管理</a></li>
                                <li class="am-disabled"><a href="#" data-id="4">角色管理</a></li>
                                <li class="am-divider"></li>
                                <li class="am-dropdown-header">账单管理</li>
                                <li><a href="#" data-id="5">费率管理</a></li>
                                <li><a href="#" data-id="6">日结账单</a></li>
                                <li><a href="#" data-id="7">充值查询</a></li>
                                <li class="am-divider"></li>
                                <li class="am-dropdown-header">CTI管理</li>
                                <li><a href="#" data-id="9">分机管理<span class="am-badge am-badge-danger am-round am-align-right">new</span></a></li>
                                <li><a href="#" data-id="13">中继管理</a></li>
                                <li><a href="#" data-id="17">语音管理</a></li>
                                <li><a href="#" data-id="20">语音菜单</a></li>
                                <li><a href="#" data-id="24">队列管理</a></li>
                                <li><a href="#" data-id="28">工号管理</a></li>
                                <li><a href="#" data-id="33">会议室</a></li>
                                <li><a href="#" data-id="34">工作日设置</a></li>
                                <li class="am-divider"></li>
                                <li class="am-dropdown-header">短信管理</li>
                                <li><a href="#" data-id="36">短信服务器</a></li>
                                <li class="am-divider"></li>
                                <li class="am-dropdown-header">系统管理</li>
                                <li><a href="#" data-id="38">数据备份</a></li>
                                <li><a href="#" data-id="39">数据清理</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">外呼管理<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#TaskStrategy/index.html" data-id="42">外呼模式</a></li>
                                <li><a href="#Task/task_history_of_generate.html" data-id="53">号码生成历史</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">统计分析<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#Statics/call_history.html" data-id="56">通话详单</a></li>
                                <li><a href="#Statics/seat_call_stat.html" data-id="57">策略外呼分析</a></li>
                                <li><a href="#Statics/extension_call_stat.html" data-id="58">分机外呼分析</a></li>
                                <li><a href="#Statics/seat_work_stat.html" data-id="59">座席工作统计</a></li>
                                <li><a href="#Statics/queue_calltime_stat.html" data-id="60">分队列通话时长统计</a></li>
                                <li><a href="#Statics/seat_calltime_stat.html" data-id="61">分座席通话时长统计</a></li>
                                <li><a href="#Statics/system_call_stat.html" data-id="62">系统话务统计</a></li>
                                <li><a href="#Statics/system_call_loss_stat.html" data-id="63">系统呼损统计</a></li>
                                <li><a href="#Statics/record_list.html" data-id="65">录音查询</a></li>
                                <li><a href="#Statics/message_list.html" data-id="66">留言查询</a></li>
                                <li><a href="#Statics/evaluation_list.html" data-id="67">满意度查询</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">短信管理<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#SMS/strategycall_sms_list.html" data-id="70">策略外呼短信管理</a></li>
                                <li><a href="#SMS/extensioncall_sms_list.html" data-id="72">分机外呼短信管理</a></li>
                                <li><a href="#SMS/sms_import.html" data-id="74">导入发送</a></li>
                                <li><a href="#SMS/send_history.html" data-id="75">短信详单</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">来话服务<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#IncomingCall/rule_list.html" data-id="78">来话导航</a></li>
                                <li><a href="#IncomingCall/black_list.html" data-id="82">黑名单</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">运行状态<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#Status/trunk_status.html" data-id="88">当前通话</a></li>
                                <li><a href="#Status/extension_status.html" data-id="89">分机在线状态</a></li>
                                <li><a href="#Status/extension_talk_status.html" data-id="90">分机通话状态</a></li>
                                <li><a href="#QueueStatus/queue_status.html" data-id="91">队列状态</a></li>
                                <li><a href="#Status/sip_server_status.html" data-id="92">服务器状态</a></li>
                                <li><a href="#CtiTester/index.html" data-id="93">系统测试</a></li>
                            </ul>
                        </li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">客资管理<span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                                <li><a href="#Customer/index.html" data-id="202">客资管理</a></li>
                                <li><a href="#Study/study_list.html" data-id="203">学习交流</a></li>
                                <li><a href="#FinanceStat/financestat_list.html" data-id="204">财务报表</a></li>
                                <li><a href="#Notice/notice_list.html" data-id="205">跑马灯管理</a></li>
                            </ul>
                        </li>
                    </ul>

                    <!-- 用户区 -->
                    <div class="am-topbar-right">
                        <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                            <button class="am-btn am-btn-primary am-topbar-btn am-btn-xs am-dropdown-toggle" data-am-dropdown-toggle>您好, 管理员 <span class="am-icon-caret-down"></span></button>
                            <ul class="am-dropdown-content am-text-xs">
                                <li><a href="#">个人资料</a></li>
                                <li><a href="#">站内信<span class="am-badge am-badge-danger am-round" style="margin-left:5px;">6</span></a></li>
                                <li><a href="#">注销</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- /用户区 -->
                </div>
                <!-- /导航菜单 -->
            </div>
        </header>
        <!--/顶部-->
        <!--主体-->
        <!--历史菜单-->
        <div class="am-container" style="margin-top:5px;">
            <ul class="am-nav am-nav-tabs am-text-xs" style="margin-bottom:5px;">
                <li class="am-active"><a href="#">首页</a></li>
                <li><a href="#">客资管理</a></li>
                <li><a href="#">管理员管理</a></li>
                <li><a href="#Status/extension_status.html" data-id="89">分机在线状态</a></li>
                <li><a href="#Status/extension_talk_status.html" data-id="90">分机通话状态</a></li>
                <li><a href="#QueueStatus/queue_status.html" data-id="91">队列状态</a></li>
                <li><a href="#Status/sip_server_status.html" data-id="92">服务器状态</a></li>
                <li><a href="#Statics/seat_calltime_stat.html" data-id="61">分座席通话时长统计</a></li>
                <li><a href="#Statics/system_call_stat.html" data-id="62">系统话务统计</a></li>
                <li><a href="#Statics/system_call_loss_stat.html" data-id="63">系统呼损统计</a></li>
            </ul>
            <!--历史菜单-->
            <!--表格-->
            <div class="am-scrollable-horizontal">
                <table class="am-table am-table-compact am-text-nowrap am-table-bordered am-table-radius am-table-striped am-table-hover am-text-sm">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>租户ID</th>        
                            <th>分机号</th>
                            <th>分机密码</th>
                            <th>中继名称</th>
                            <th>主叫号码</th>
                            <th>注册端口</th>
                            <th>录音标识</th>
                            <th>中继注册模式</th>
                            <th>激活状态</th>
                            <th>呼叫转移</th>
                            <th class="am-show-xl-only">创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-key="526">
                            <td>2</td>
                            <td>user1[1]</td>            
                            <td>202</td>
                            <td>a55688</td>
                            <td>US188</td>
                            <td>075528919972</td>
                            <td>5060</td>
                            <td>否</td>
                            <td>IP模式</td>
                            <td>已激活</td>
                            <td> </td>
                            <td class="am-show-xl-only">2015-09-11 22:39:41</td>
                            <td>
                                <div class="am-dropdown am-text-xs" data-am-dropdown><button class="am-btn am-btn-primary am-dropdown-toggle am-btn-xs" data-am-dropdown-toggle>操作<span class="am-icon-caret-down"></span></button><ul class="am-dropdown-content"><li><a href="http://www.so.com" class="lnk-edit" data-id="1">编辑</a></li><li><a href="#" class="lnk-remove" data-id="1">删除</a></li></ul></div>
                            </td>
                        </tr>
                    <script type="text/javascript">
                        for (var i = 1; i < 30; i++) {
                            document.write('<tr data-key="525"><td>1</td><td>user1[1]</td><td>201</td><td>a55688</td><td>US188</td><td>075528919972</td><td>5060</td><td>否</td><td>IP模式</td><td>已激活</td><td></td><td>2015-09-11 22:39:41</td><td><div class="am-dropdown am-text-xs" data-am-dropdown><button class="am-btn am-btn-primary am-dropdown-toggle am-btn-xs" data-am-dropdown-toggle>操作<span class="am-icon-caret-down"></span></button><ul class="am-dropdown-content"><li><a href="http://www.baidu.com" class="lnk-edit" data-id="' + i + '">编辑</a></li><li><a href="#" class="lnk-remove" data-id="' + i + '">删除</a></li></ul></div></td></tr>');
                        }
                    </script>
                    </tbody>
                </table>
            </div>
            <!--/表格-->
            <!--分页-->
            <ul class="am-pagination am-text-xs">
                <li class="am-disabled"><a href="#">首页</a></li>
                <li><a href="">上一页</a></li>
                <li class="am-active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="">下一页</a></li>
                <li><a href="#">末页</a></li>
                <li><span style="border:none;">共 78 条记录, 当前显示20/25条, 页次 1/4 页</span></li>
            </ul>
            <!--/分页-->
        </div>
        <!--/主体-->
        <!--弹窗-->
        <div class="am-modal" tabindex="-1" id="doc-form-dialog">
            <div class="am-modal-dialog">
                <div class="am-modal-hd"><strong>编辑</strong><a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a></div>
                <div class="am-modal-bd">
                    <iframe src="about:blank" frameborder="0" scrolling="yes" style="width:100%" ></iframe>
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm>提交</span>
                </div>
            </div>
        </div>
        <!--/弹窗-->
        <div class="am-modal am-modal-confirm" tabindex="-1" id="doc-confirm">
            <div class="am-modal-dialog">
                <div class="am-modal-hd"><i class="am-icon-btn am-icon-fw am-danger am-icon-warning"></i>警告</div>
                <div class="am-modal-bd">
                    你，确定要删除这条记录吗？
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm>确定</span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('.lnk-remove').on('click', function () {
                    $('#doc-confirm').modal({
                        relatedTarget: this,
                        onConfirm: function (options) {
                            var $link = $(this.relatedTarget);
                            var msg = $link.length ? '你要删除的链接 ID 为 ' + $link.data('id') :
                                    '确定了，但不知道要整哪样';
                            alert(msg);
                        },
                        onCancel: function () {
                            //alert('算求，不弄了');
                        }
                    });
                    return false;
                });
            });

            $(function () {
                $('.lnk-edit').on('click', function () {
                    $('#doc-form-dialog').data('url', $(this).attr('href')).modal({
                        relatedTarget: this,
                        onConfirm: function (e) {
                            var $ifrm = $(e.target).find('iframe');
                            alert($ifrm.attr('src'));
                        },
                        onCancel: function (e) {
                            //alert('不想说!');
                        }
                    }).find('.am-modal-hd strong').text('编辑123');
                    return false;
                });
                $('#doc-form-dialog').on('opened.modal.amui', function () {
                    var $ifrm = $(this).find('iframe');
                    $ifrm.attr('src', 'about:blank').attr('src', $(this).data('url'));
                });
            });
        </script>
    </body>
</html>
